<template>
<div class="maintain">
  <el-carousel :interval="4000" type="card" height="200px" style="margin-top: 12px">
    <el-carousel-item v-for="item in imgList" :key="item.id">
	    <el-row>
	      <el-col :span="24">
          <img ref="imgHeight" :src="item.idView" class="banner_img" width="100%" height="100%" object-fit="cover" />
          </el-col>
	    </el-row>
	  </el-carousel-item>

  </el-carousel>

  <el-tabs>
            <el-tab-pane label="早市">
              <div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="午市">
              <div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="夜市">
              <div>
              </div>
            </el-tab-pane>
</el-tabs>

  <el-tabs>
            <el-tab-pane label="今天">
              <div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="明天5.12">
              <div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="后天5.13">
              <div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="5.14">
              <div>
              </div>
            </el-tab-pane>
             <el-tab-pane label="5.15">
              <div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="5.16">
              <div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="5.17">
              <div>
              </div>
            </el-tab-pane>
             <el-tab-pane label="其他">
              <div>
              </div>
            </el-tab-pane>
  </el-tabs>
  

  <el-col :span="6" v-for="(o, index) in 3" :key="o" :offset="index > 0 ? 2 : 0">
  <el-card class="box-card" shadow="hover" >
  <div :key="o" class="text item">
    {{o +'号桌子' }}
    <el-button type="success" plain @click="dialogFormVisible = true" >开台</el-button>
    <el-button type="warning" @click="centerDialogVisible = true">重置</el-button>
  </div>
</el-card>
 <el-card class="box-card" shadow="hover" >
  <div :key="o" class="text item">
    {{o +'号桌子' }}
    <el-button type="success" plain @click="dialogFormVisible = true">开台</el-button>
    <el-button type="warning" @click="centerDialogVisible = true">重置</el-button>
  </div>
</el-card>
 <el-card class="box-card" shadow="hover" >
  <div :key="o" class="text item">
    {{o +'号桌子' }}
    <el-button type="success" plain @click="dialogFormVisible = true">开台</el-button>
    <el-button type="warning" @click="centerDialogVisible = true">重置</el-button>
  </div>
</el-card>
</el-col>

<el-dialog title="请填写餐桌信息" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="餐台号" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off" placeholder="餐台号码"></el-input>
    </el-form-item>

    <el-form-item label="餐台人数" :label-width="formLabelWidth">
      <el-select v-model="form.people" placeholder="请选择餐台人数">
        <el-option label="1人" value="1"></el-option>
        <el-option label="2人" value="2"></el-option>
        <el-option label="3人" value="3"></el-option>
        <el-option label="3人到5人" value="5"></el-option>
        <el-option label="5人到8人" value="8"></el-option>
        <el-option label="8人以上" value="10"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="就餐时间">
    <el-col :span="6">
      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="6">
      <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>

  <el-form-item label="是否停车">
    <el-radio-group v-model="form.car">
      <el-radio label="停车"></el-radio>
      <el-radio label="不停车"></el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item label="特殊要求">
    <el-input type="textarea" v-model="form.desc"></el-input>
  </el-form-item>



  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="onAction">确 定</el-button>
  </div>
</el-dialog>

<el-dialog
  title="提示"
  :visible.sync="centerDialogVisible"
  width="30%"
  center>
  <span>是否重置状态？</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="onSubmit" >确 定</el-button>
  </span>
</el-dialog>




</div>
</template>

<script>
export default {
  name:'',
   data() {
    return {
      imgList: [
          {id: 0,  idView: require('../assets/images/shaokao1.jpg')},
          {id: 1,  idView: require('../assets/images/shaokao2.jpg')},
          {id: 2,  idView: require('../assets/images/shaokao3.jpg')},
          {id: 3,  idView: require('../assets/images/shaokao4.jpg')}
        ],
        centerDialogVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          people: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          car: '',
          desc: ''
        },
        formLabelWidth: '80px'
}
   },
   methods: {
     onSubmit() {
        this.$notify({
          title: '成功',
          message: '重置状态成功！',
          type: 'success',
        });
      },
      onAction(){
        this.$message({
          message: '开台成功',
          type: 'success',
          dialogFormVisible:false
        });
      },
   },
}

</script>

<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 240px;
    margin-left: 8%;
    margin-bottom: 5%;
  }

   .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .spanbig {
      display: -moz-box;
      font-family: 16px bold;
  }

  .spansmall {
      display: -moz-box;
      font-family: 10px;
      padding-left: 5%;
  }
</style>